
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery表格数据增删改插件 Tabullet.js</title>
    <link rel="stylesheet" type="text/css" href="/static/css/AdminStyle/bootstrap.css">

    <script src="/static/js/jquery-1.8.3.min.js" ></script>
    <script src="/static/js/AdminStyle/Tabullet.js" ></script>

    <style>
{#    body {#}
{#        background-color: #fafafa;#}
{#    }#}
{##}
{#    .container {#}
{#        margin: 150px auto;#}
{#    }#}
    </style>

    <script type="text/javascript">
    $(function() {
        var source = [{
            id: 1,

            name: "智联招聘",
            url: "www.baidu.com",
            admin:"fangzhen",
            remark:"为智联主网页",
            state:"爬取中"

        }, {
            id: 2,
            name: "智联招聘",
            url: "www.baidu.com",
            admin:"fangzhen",
            remark:"为智联主网页",
            state:"爬取中"
        }, {
            id: 101,
            name: "智联招聘",
            url: "www.baidu.com",
            admin:"fangzhen",
            remark:"为智联主网页",
            state:"爬取中"
        }, {
            id: 102,
            name: "智联招聘",
            url: "www.baidu.com",
            admin:"fangzhen",
            remark:"为智联主网页",
            state:"爬取中"
        }, {
            id: 103,
            name: "智联招聘",
            url: "www.baidu.com",
            admin:"fangzhen",
            remark:"为智联主网页",
            state:"爬取中"
        }, ];

        function resetTabullet() {
            $("#table").tabullet({
                data: source,
                action: function(mode, data) {
                    console.dir(mode);
                    if (mode === 'save') {
                        source.push(data);
                    }
                    if (mode === 'edit') {
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].id == data.id) {
                                source[i] = data;
                            }
                        }
                    }
                    if (mode == 'delete') {
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].id == data) {
                                source.splice(i, 1);
                                break;
                            }
                        }
                    }
                    resetTabullet();
                }
            });
        }

        resetTabullet();
    });
    </script>
</head>

<body>
<div class="container" style="width: 90%">
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-hover" id="table">
                <thead>
                    <tr data-tabullet-map="id">
                        <th width="50" data-tabullet-map="_index" data-tabullet-readonly="true">No</th>
                        <th data-tabullet-map="name">网站名</th>
                        <th data-tabullet-map="url">网址</th>
                        <th data-tabullet-map="admin">发布人</th>
                        <th data-tabullet-map="remark">备注</th>
                        <th data-tabullet-map="state">状态</th>

                        <th width="50" data-tabullet-type="edit"></th>
                        <th width="50" data-tabullet-type="delete"></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
</html>
